<template>
  <div class="box_img">
    <div v-for="(item,index) in cateList" class="box_img_item">
      <span v-if="index == 0" class="iconfont icon-fupinqingkuang"></span>
      <span v-else-if="index == 1" class="iconfont icon-falv"></span>
      <span v-else-if="index == 2" class="iconfont icon-huanbao"></span>
      <span v-else-if="index == 3" class="iconfont icon-kangjuxiangcun"></span>
      <span v-else-if="index == 4" class="iconfont icon-fuwu"></span>
      <span v-else-if="index == 5" class="iconfont icon-xingtuxuetang-neixunshi-"></span>
      <span v-else-if="index == 6" class="iconfont icon-lilunxuexi"></span>
      <span v-else-if="index == 7" class="iconfont icon-50"></span>
      <span v-else-if="index == 8" class="iconfont icon-laba"></span>
      <span v-else-if="index == 9" class="iconfont icon-tiyu"></span>
      <span v-else class="iconfont icon-qita"></span>
      <span class="img_item_title" v-html="item.title"></span>
    </div>
  </div>
</template>

<script>
    export default {
        name: "list_new_default",
      data() {
        return {
          cateList: []
        }
      },

      created() {
        this.getCategoryList();
        this.$emit("childData",this.$route.query.childdata);
        this.$emit("childData2",1);
      },

      methods:{
        getCategoryList() {
          let that = this;
          that.$http.get('/api/ScreenkApi/getVoluntCategoryParent', {vollege_id:that.$util.vollege_id}, r => {
            console.log('1233', r)

            r.data.forEach(function (item, key) {
              item.title = item.title.replace("(", "<br/>(");
              item.title = item.title.replace("（", "<br/>（");
            })

            that.cateList = r.data;
          })
        }
      }
    }
</script>

<style scoped>
  .box_img{
    padding-top: 60px !important;
    padding-left: 10px !important;
    padding-right: 0px !important;
  }
  .box_img_item .iconfont {
    font-size: 42px;
    color: #02c070;
  }

  .box_img_item .icon-fupinqingkuang {
    font-size: 52px;
  }

  .box_img_item .icon-kangjuxiangcun {
    font-size: 56px;
  }

  .box_img_item .icon-xingtuxuetang-neixunshi- {
    font-size: 48px;
  }

  .box_img_item .icon-50 {
    font-size: 55px;
  }

  .box_img_item .icon-qita {
    font-size: 36px;
  }

  .box_img_item {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 15px 0;
    text-align: center;
    width: 158px;
    height: 137px;
    margin: 50px 25px;
    background: url("../../../assets/images/page/six.png") no-repeat center center;
  }

  /*.list_new_index {*/
  /*  width: 100vw;*/
  /*  height: 1080px;*/
  /*  background: url("../../assets/images/banner/bg_banner1.jpg") center top no-repeat;*/
  /*}*/

  .box_img {
    display: flex;
    flex-flow: row wrap;
    padding: 111px 90px 0 280px;
    justify-content: center;
  }

  .box_img_item .img_item_title {
    font-size: 22px;
    color: #02c070;
  }

</style>
